<!--
  文件描述：
  创建时间：2024/1/27/027 11:43
  创建人：Administrator
-->
<template>
  <el-tree :data="menus"
           :props="defaultProps"
           @node-click="handleNodeClick"
           :expand-on-click-node="false"
           :show-checkbox="true"
  node-key="catId">
    <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button v-if= "node.level <= 2" type="text" size="mini" @click="() => append(data)">
            新增
          </el-button>
          <el-button v-if="node.childNodes.length == 0" type="text" size="mini" @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
  </el-tree>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// 例如：import uploadFile from '@/components/uploadFile/uploadFile'

export default {
  created() {
    this.getMenuData()
  },
  data() {
    return {
      menus: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      // console.log(data)
    },
    getMenuData() {
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        methods: 'get'
      }).then(({data}) => {
        console.log(data)
        this.menus = data.data;
      })
    },

    append(data) {
      console.log('append', data)
    },

    remove(node, data) {
      console.log("remove", node, data);
    }
  }
}
</script>

<style scoped lang="scss">
//@import url(); 引入公共css类
</style>
